<!DOCTYPE html>
<html>
	<head>
		<title><?php echo lang('site_title');?></title>
		<meta name="viewport" content="initial-scale=1.0">
		<meta charset="utf-8">

		<link type="text/css" href="<?php echo base_url();?>static/css/google_map.css" />

		<script type="text/javascript" src="<?php echo base_url();?>static/js/jquery.js"></script>
		<script type="text/javascript" src="<?php echo base_url();?>static/js/jquery.cookie.js"></script>

		<!-- MarkerClusterer 内容库使用网格型聚类方法将地图分成特定大小的方块（大小会在不同缩放比例下发生变化），并将标记组合到每个方形网格内。 -->
		<!-- MarkerClusterer Reference 必须出现在 googleMap.markerClusterer 被调用之前，mapsJsApi 加载之后！所以：要么在 jsApi 加载之前阻塞，要么取消 jsApi 的 ASYNC 加载参数！ -->
		<script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js"></script>

		<!-- 异步加载 Google Maps JavaScript API -->
		<!-- 要加载 Google Maps JavaScript API，此 script 标记为必需，该文件用于加载使用 Maps JavaScript API 所需的所有符号和定义。 -->
		<!-- async 属性允许浏览器在 Maps JavaScript API 加载的同时渲染网站的其余内容。当 API 就绪时，它将调用使用 callback 参数指定的函数。 -->
		<script async defer src="https://maps.googleapis.com/maps/api/js?key=<?php echo $google_ak;?>&callback=googleMap.processor"></script>
		<!-- 也可同步加载 API

在加载 Maps JavaScript API 的 script 标记中，可以省略 async 属性和 callback 参数。这会冻结 API 的加载，在 API 下载完成时再继续执行。

这样做很可能会减缓页面加载速度，但意味着您可以在编写后续脚本标记时假定 API 已经加载。 -->

		<!-- visualization 内容库用于显示热图。它包含一个 HeatmapLayer 类。使用内容库时，必须在调用 Maps API JavaScript 时进行加载。 -->
		<script async defer src="https://maps.googleapis.com/maps/api/js?key=<?php echo $google_ak;?>&libraries=visualization&callback=googleMap.processor"></script>
	</head>
	<body>
		<h1><?php echo $title; ?></h1>


		<div class="mapContainer" style="height:400px;"></div>

		<script type="text/javascript">

			var googleMap = {};
			// with(googleMap) {
			//     mapHandle = null;
			//     container = document.getElementsByClassName("mapContainer")[0];
			//     center = {
			//         ululu: {lat: -25.363, lng: 131.044}
			//     };
			//     options = {
			//         center: {lat: -25.363, lng: 131.044},
			//         zoom: 4
			//     };
			// }
			googleMap.mapHandle = null;
			googleMap.container = document.getElementsByClassName("mapContainer")[0];
			googleMap.points = {
				tutorial: {lat: -34.397, lng: 150.644},
				marker: {lat: -25.363, lng: 131.044},//ululu
				markerClusterer: {lat: -28.024, lng: 140.887},
				importingDataGeoJSON: {lat: 2.8, lng: -187.3}, // google is not defined yet! new google.maps.LatLng(2.8,-187.3),
				importingDataGeoJSON_StyleOptions: {lat: -33.865427, lng: 151.196123}
				
			};
			googleMap.options = {
				init: {
					center: googleMap.points.tutorial,
					zoom: 8
				},
				marker: {
					center: googleMap.points.marker,
					zoom: 4
				},
				markerClusterer: {
					center: googleMap.points.markerClusterer,
					zoom: 3
				},
				importingDataGeoJSON: {
					center: googleMap.points.importingDataGeoJSON,
					zoom: 2,
					mapTypeId: 'terrain'
				},
				importingDataGeoJSON_StyleOptions: {
					center: googleMap.points.importingDataGeoJSON_StyleOptions,
					zoom: 2,
					mapTypeId: 'terrain'
				},
			};

			googleMap.processor = function() {
				this.init();
				// this.marker();
				// this.markerClusterer();
				// this.importingDataGeoJSON();
				// this.importingDataGeoJSONFromLocal();
				// this.importingDataGeoJSONFromJSONP();
				// this.importingDataGeoJSON_StyleOptions();
				this.importingDataGeoJSON_StyleOptions(true);

			};

			googleMap.init = function() {
				// this.mapHandle = new google.maps.Map(this.container, this.options.init);
				// this.mapHandle = new google.maps.Map(this.container, this.options.marker);
				// this.mapHandle = new google.maps.Map(this.container, this.options.markerClusterer);
				// this.mapHandle = new google.maps.Map(this.container, this.options.importingDataGeoJSON);
				this.mapHandle = new google.maps.Map(this.container, this.options.importingDataGeoJSON_StyleOptions);

				return this;
			};

			googleMap.marker = function() {
				var marker = new google.maps.Marker({
					position: this.points.marker,
					map: this.mapHandle
				});

				return this;
			};

			googleMap.markerClusterer = function() {
				// Create an array of alphabetical characters used to label the markers.
				var labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';

				// Add some markers to the map.
				// Note: The code uses the JavaScript Array.prototype.map() method to
				// create an array of markers based on a given "locations" array.
				// The map() method here has nothing to do with the Google Maps API.
				var markers = locations.map(function(location, i){
					return new google.maps.Marker({
						position: location,
						label: labels[i % labels.length]
					});
				});
				
				/*
					从 GitHub 获取标记聚类内容库和图片，然后将它们存储在应用可访问的服务器上。
					GitHub 上的 Google 地图存储区提供了 MarkerClusterer 的 JavaScript 内容库和图片文件。将 GitHub 上的下列文件下载或复制到一个应用可访问的位置：
						markerclusterer.js
						m1.png
						m2.png
						m3.png
						m4.png
						m5.png
					本例使用
						https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js
						https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m[1-5].png
				 */
				// Add a marker clusterer to manage the markers.
				var markerCluster = new MarkerClusterer(this.mapHandle, markers, {
					imagePath: "https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m"
				});

				return this;
			};

			// 从本地或远程来源导入 GeoJSON 数据，并将其显示在地图上
			googleMap.importingDataGeoJSON = function() {
				// Create a <script> tag and set the USGS URL as the source.
				var script = document.createElement('script');
				// This example uses a local copy of the GeoJSON stored at
				// http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_week.geojsonp
				script.src = "https://developers.google.com/maps/documentation/javascript/examples/json/earthquake_GeoJSONP.js";
				document.getElementsByTagName('head')[0].appendChild(script);
				// 去外面定义回调吧!!!
			};
			// 定义 googleMap.importingDataGeoJSON 的 callback, 放里面的话应该会的时间差问题！
			// Loop through the results array and place a marker for each
			// set of coordinates.
			window.eqfeed_callback = function(results) {
				for (var i = 0; i < results.features.length; i++) {
					var coords = results.features[i].geometry.coordinates;
					var latLng = new google.maps.LatLng(coords[1],coords[0]);
					// var marker = new google.maps.Marker({
					// 	position: latLng,
					// 	map: googleMap.mapHandle
					// });
					locations.push(latLng);
				}
				googleMap.markerClusterer();
			};

			// 加载数据: https://developers.google.com/maps/documentation/javascript/importing_data
			// 从同一网域加载数据
			/*
				Google 地图数据层提供了一个可用于存储任意地理空间数据（包括 GeoJSON）的容器。

				如果数据所在的文件托管在与 Maps JavaScript API 应用相同的网域上，可以使用 map.data.loadGeoJson() 方法加载数据。

				文件必须位于同一网域上，但可以将其托管在不同的子域名中。

				例如，可以从 www.example.com 向 files.example.com 发出请求。

				map.data.loadGeoJson('data.json');
			 */
			// 
			// 跨网域加载数据
			/*
				还可以从所在网域以外的其他网域请求数据，前提是网域的配置允许这样的请求。 针对这种权限的标准称作跨来源资源共享 (CORS)。

				如果网域已允许跨域请求，其响应标头应包括以下声明：
				Access-Control-Allow-Origin: *

				使用 Chrome 开发者工具 (DevTools) 了解网域是否启用了 CORS。

				从这种网域加载数据与从同一网域加载 JSON 的方法相同：

				map.data.loadGeoJson('http://www.CORS-ENABLED-SITE.com/data.json');
			 */
			// GeoJSON 是一种得到广泛使用的开源地理数据编码格式，基于 JSON（JavaScript 对象标记）制定。 专为 JSON 数据设计的 JavaScript 工具和方法同样兼容 GeoJSON。
			// 如需了解详细信息，请阅读开发者指南。
			// https://developers.google.com/maps/documentation/javascript/datalayer#load_geojson
			googleMap.importingDataGeoJSONFromLocal = function() {
				var jsonDataUrl = "<?php echo base_url();?>static/json/localDomain_GeoJSON.json";
				googleMap.mapHandle.data.loadGeoJson(jsonDataUrl);
			};

			// 请求 JSONP
			googleMap.importingDataGeoJSONFromJSONP = function() {

				// JSONP 代表_填充式_ JSON。 它是运行在网络浏览器中的 JavaScript 程序内使用的一种通信方法，用于从位于不同网域的服务器请求数据。
				
				// 目标网域必须支持 JSONP 请求，才能使用此方法。
				/* 
					从无法掌控的网域请求 JSONP 风险极高。

						由于浏览器会加载任何以脚本形式返回的代码，因此只应从您信任的网域请求 JSONP。 一般会使用 CORS 替代 JSONP；前者安全得多，在两者都可用时应优先使用前者。
				*/
				
				// 必须在代码中定义回调脚本
				window.eqfeed_callback = function(response) {
					// 使用 addGeoJson() 方法将解析过的 GeoJSON 数据添加到地图上。
					console.log("earthquake.usgs.gov response is:", response);
					googleMap.mapHandle.data.addGeoJson(response);
				};

				// 要请求 JSONP，请使用 createElement() 向文档头部添加一个 script 标记。
				var script = document.createElement("script");
				script.src = "http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_week.geojsonp";
				document.getElementsByTagName('head')[0].appendChild(script);
				// 该脚本运行时，目标网域会将数据以参数形式传递给_另一_ 脚本（通常命名为 callback()）。 目标网域定义回调脚本的名称，即在浏览器中加载目标网址时页面上出现的第一个名称。
			};



			// 设置数据样式
			/* 
				可通过向 Map 对象添加 GeoJSON 数据来改变数据的外观。

				如需了解有关设置数据样式的详细信息，请阅读开发者指南。
				https://developers.google.com/maps/documentation/javascript/datalayer#style_geojson_data
			*/
			

			// 可视化数据：绘制地震图
			// 放置初级标记
			// 使用形状和热图自定义地图
			// earchquakes
			googleMap.importingDataGeoJSON_StyleOptions = function(visualization) {

				window.eqfeed_callback = function(results) {
					googleMap.mapHandle.data.addGeoJson(results);
				};

				// 使用形状和热图自定义地图
				/* 
					此部分介绍在地图上自定义丰富数据集的其他方法。 以本教程上一部分中创建的地图为例，其中在每个地震位置都显示了标记。

					可以通过自定义标记来可视化更多数据，例如地震最频发的位置及其震级或震源深度。

					可使用下面这些选项来自定义初级标记：
				*/
				// 使用圆圈大小：
				// 可以使用符号绘制大小与地震震级对应的圆圈（或任何其他形状）
				// 这样一来，就可以在地图上用最大的圆圈表示强烈地震。
				// 将地震的 magnitude 属性传递给此函数。
				// getCircle() 绘制大小由震级值定义的圆圈，并返回用作地震自定义标记的圆圈。
				var getCircle = function getCircle(magnitude) {
					return {
						path: google.maps.SymbolPath.CIRCLE,
						fillColor: 'red',
						fillOpacity: .2,
						scale: Math.pow(2, magnitude) / 2,
						strokeColor: 'white',
						strokeWeight: .5
					};
				};

				// 使用热图：
				/* 
					可视化内容库中的热图层提供了一种简单却又有效的地震分布显示方式。 热图使用颜色来表示地震点的密度，因此可以更方便地辨认出地震较活跃的区域。
					热图还可使用 WeightedLocations，例如，可以通过它让较大规模的地震在热图中显示得更醒目。
				*/
				if (typeof visualization !== undefined && visualization) {
					// 与上例相同，同样是将 USGS 数据传递给 eqfeed_callback 函数。
					// 这段代码会将每个地震的坐标添加到 heatmapData 数组中。
					// 然后将该数组传递给 HeatmapLayer 构造函数，再由其创建热图并显示在地图上。
					window.eqfeed_callback = function(results) {
						
						var heatmapData = [];
						for (var i = 0; i< results.features.length; i++) {
							var coords = results.features[i].geometry.coordinates;
							var latLng = new google.maps.LatLng(coords[1], coords[0]);
							// heatmapData.push(latLng);

							// 要想按震级强调结果，可改为将 WeightedLocation 对象传递给 heatmapData 数组。
							var magnitude = results.features[i].properties.mag;
							var weightedLoc = {
								location: latLng,
								weight: Math.pow(2, magnitude)
							};
							heatmapData.push(weightedLoc);
						}
						var heatmap = new google.maps.visualization.HeatmapLayer({
							data: heatmapData,
							dissipating: false,
							map: googleMap.mapHandle
						});
					};
				}

				var script = document.createElement("script");
				script.src = "https://developers.google.com/maps/documentation/javascript/examples/json/earthquake_GeoJSONP.js";
				document.getElementsByTagName('head')[0].appendChild(script);
				
				if (typeof visualization !== undefined && visualization) {
					return this;
				}

				// 向调用 getCircle() 函数的数据层添加 样式。
				// 为该点创建自定义图像，而不是使用默认的红色 marker.cd
				googleMap.mapHandle.data.setStyle(function(feature) {
					var magnitude = feature.getProperty('mag');
					return {
						icon: getCircle(magnitude)
					};
				});

				return this;
			};

			


		</script>






	</body>
</html>
